<template>
    <div class="header-second">
        <div class="header-menu">
            <a href="#"><img class="picture" src="http://i.serengeseba.com/uploads/i_4_2503644824x1245481406_26.jpg"
                             alt=""></a>
            <div class="second-menu">
                <ul class="menu-list">
                    <li id="all"><a> 全部商品分类 </a></li>
                    <li v-for="(item,i) in phoneList" :key="i" @mouseenter="change1(i)">
                        <div @mouseenter="childrenHover" @mouseleave="childrenLeave" style="height: 80px">
                          <a class="red" href="">{{ item.n_name }} </a>
                        </div>
                    </li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                    <!--            导航栏下拉显示-->
                    <div @mouseenter="childrenHover_1" @mouseleave="childrenLeave_1">
                        <el-collapse-transition>
                            <header-context :xiaoMiList="xiaoMiList[index1]" v-show="children" :index1="index1"/>
                        </el-collapse-transition>
                    </div>

                </ul>
            </div>

            <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="state"
                    :fetch-suggestions="querySearch"
                    :placeholder="title">
                <template slot-scope="{ item }">
                    <div class="name">{{ item.value }}</div>
                    <span class="addr">{{ item.address }}</span>
                </template>
            </el-autocomplete>
            <!--        <el-dropdown trigger="click">-->
            <!--        <el-input  class="input" v-model="input" :placeholder="title"></el-input>-->
            <!--            <el-dropdown-menu slot="dropdown" style="margin-top: 20px">-->
            <!--              <el-dropdown-item v-for="item in inputList">{{item}}</el-dropdown-item>-->
            <!--            </el-dropdown-menu>-->
            <!--        </el-dropdown>-->
            <el-button icon="el-icon-search" class="search"></el-button>
        </div>
    </div>
</template>

<script>
    import {getNavList, getNavPicList} from "@/api/headerTop"
    import headerContext from "@/components/xiaomi-header/Header-context"

    export default {
        name: "header-second",
        components: {headerContext},
        comments: {headerContext},
        data() {
            return {
                restaurants: [],
                state: '',
                input: '',
                m: [],
                phoneList: [],
                picture: [],
                phoneList1: ['手机', '电视', '黑鲨4s', '空调', '红米', '洗衣机', '耳机'],
                xiaoMiList: [],
                children: false,
                title: '手机',
                index: 0,
                index1: 0
            };
        },
        methods: {
            getList() {
                getNavList().then(response => {
                    this.phoneList = response;
                })
                getNavPicList().then(response => {
                    this.picture = response;

                    for (let p of this.picture) {
                        p.prod_pic = process.env.VUE_APP_BASE_API + p.prod_pic
                    }
                    this.xiaoMiList.push(this.picture.filter(value => {
                            return value.n_id === 1
                        })
                    )
                    this.xiaoMiList.push(this.picture.filter(value => {
                            return value.n_id === 2
                        })
                    )
                    this.xiaoMiList.push(this.picture.filter(value => {
                            return value.n_id === 3
                        })
                    )
                    this.xiaoMiList.push(this.picture.filter(value => {
                            return value.n_id === 4
                        })
                    )
                    this.xiaoMiList.push(this.picture.filter(value => {
                            return value.n_id === 5
                        })
                    )
                    this.xiaoMiList.push(this.picture.filter(value => {
                            return value.n_id === 6
                        })
                    )
                    this.xiaoMiList.push(this.picture.filter(value => {
                            return value.n_id === 7
                        })
                    )
                })
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "全部商品"},
                    {"value": "手机"},
                    {"value": "电视"},
                    {"value": "耳机"},
                    {"value": "黑鲨4s"},
                    {"value": "空调"},
                    {"value": "红米"},
                    {"value": "洗衣机"}
                ]
            },
            childrenHover() {
                this.children = true
            },
            childrenLeave() {
                this.children = false
            },
            childrenHover_1() {
                this.children = true
            },
            childrenLeave_1() {
                this.children = false
            },
            change1(index) {
                this.index1 = index
            }
        },
        // 输入框默认值更改
        created() {
            this.getList();
            setInterval(() => {
                this.title = this.phoneList1[this.index]
                this.index = this.index + 1
                if (this.index > 10) {
                    this.index = 0
                }
            }, 3000)
        },
        mounted() {
            this.restaurants = this.loadAll();
        }

    }
</script>

<style scoped>
    .search-list li {
        list-style-type: none;
    }

    img {
        width: 160px;
        height: 110px;
    }

    #all {
        visibility: hidden;
    }

    .picture {
        width: 56px;
        height: 56px !important;
        border-radius: 25%;
        margin: 0 auto;
        float: left;
    }

    .header-second {
        height: 123px;
    }

    .header-menu {
        padding-top: 22px;
        width: 1226px;
        height: 100px;
        margin: 0 auto;
    }

    .second-menu {
        width: 850px;
        float: left;

    }

    .menu-list {
        margin: 0;
        padding: 12px 0 0 100px;
        list-style-type: none;
        font-size: 16px;
    }

    .second-menu a {
        text-decoration: none;
        color: #333;
    }

    .el-autocomplete {
        margin-top: 12px;
        width: 200px;
    }

    .search {
        border: 1px #333 solid;
    }

    .red:hover {
        color: red;
    }

    .menu-list li {
        float: left;
        padding-top: 8px;
        padding-left: 15px;
        list-style: none;
    }

    .menu-list a {
        color: #333333;
        display: block;
        height: 40px;
        text-decoration: none;
    }
</style>
